<!DOCTYPE html>
<html>
<head>
    <title>Positronium Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters for the drawing
        const centerX = 275;
        const centerY = 225;
        const orbitRadius = 120;
        const particleRadius = 25;
        
        // Angles for particles (in radians)
        const electronAngle = 135 * Math.PI / 180;
        const positronAngle = -45 * Math.PI / 180; // Diametrically opposite

        // Calculate particle positions
        // Note: Canvas y-coordinate is inverted (0 at top)
        const electronX = centerX + orbitRadius * Math.cos(electronAngle);
        const electronY = centerY - orbitRadius * Math.sin(electronAngle);
        const positronX = centerX + orbitRadius * Math.cos(positronAngle);
        const positronY = centerY - orbitRadius * Math.sin(positronAngle);
        
        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY) {
            const headLength = 10;
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Start Drawing ---

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '20px Arial';

        // 1. Draw the dashed circular orbit
        ctx.beginPath();
        ctx.setLineDash([8, 6]);
        ctx.arc(centerX, centerY, orbitRadius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 2. Draw the centre of mass
        ctx.beginPath();
        ctx.arc(centerX, centerY, 4, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();

        // 3. Draw the electron
        ctx.beginPath();
        ctx.arc(electronX, electronY, particleRadius, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();

        // 4. Draw the positron
        ctx.beginPath();
        ctx.arc(positronX, positronY, particleRadius, 0, 2 * Math.PI);
        ctx.fillStyle = '#cccccc'; // Grey color
        ctx.fill();
        ctx.stroke();

        // 5. Draw lines from center to particles
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(electronX, electronY);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(positronX, positronY);
        ctx.stroke();

        // 6. Draw velocity arrows on the orbit (showing clockwise rotation as in the image)
        // Arrow near electron
        drawArrow(ctx, 195, 120, 180, 115);

        // Arrow near positron
        drawArrow(ctx, 355, 330, 370, 335);

        // 7. Add labels
        ctx.fillStyle = 'black';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';

        // Label "centre of mass"
        ctx.fillText('centre of mass', 80, 80);
        ctx.beginPath();
        ctx.moveTo(200, 85);
        ctx.lineTo(centerX - 10, centerY - 10);
        ctx.stroke();

        // Label "electron"
        ctx.fillText('electron', 60, 210);
        ctx.beginPath();
        ctx.moveTo(140, 205);
        ctx.lineTo(electronX, electronY);
        ctx.stroke();
        
        // Label "positron"
        ctx.textAlign = 'right';
        ctx.fillText('positron', 490, 310);
        ctx.beginPath();
        ctx.moveTo(410, 310);
        ctx.lineTo(positronX, positronY);
        ctx.stroke();
        
        // Label "r"
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        const r_label_x = centerX + (positronX - centerX) * 0.6;
        const r_label_y = centerY + (positronY - centerY) * 0.6 - 10;
        ctx.fillText('r', r_label_x, r_label_y);

        // 8. Add Figure caption
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.font = 'bold 20px Arial';
        ctx.fillText('Fig. 2.1', canvas.width / 2 - 45, 420);
        ctx.font = '20px Arial';
        ctx.fillText('(not to scale)', canvas.width / 2 + 55, 420);

    </script>
</body>
</html>